<% content_for :googlemaps do %>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">
    var centro = new google.maps.LatLng(<%= @maquina.latitud %>,<%= @maquina.longitud %>);
    var marker;
    var map;
    var point;

    function initialize() {
      var mapOptions = {
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.HYBRID,
        center: centro
      };

      map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);

      marker = new google.maps.Marker({
        map:map,
        draggable:true,
        animation: google.maps.Animation.DROP,
        position: centro
      });
      google.maps.event.addListener(marker, 'click', toggleBounce);
      google.maps.event.addListener(marker, 'dragend', coordinates);
    }

    function toggleBounce() {
      if (marker.getAnimation() != null) {
        marker.setAnimation(null);
      } else {
        marker.setAnimation(google.maps.Animation.BOUNCE);
      }
    }

    function coordinates() {
      var point = new google.maps.LatLng(marker.getPosition().lat(),marker.getPosition().lng(),true);
      map.panTo(point);
      document.getElementById("maquina_latitud").value = point.lat();
      document.getElementById("maquina_longitud").value = point.lng();
    }

  </script>
<% end %>

<p>
  <b>Nombre:</b>
  <%=h @maquina.nombre %>
</p>

<p>
  <b>Descripcion:</b>
  <%=h @maquina.descripcion %>
</p>
<p>
  <b>Status:</b>
  <%=h @maquina.status %>
</p>


<div  id="map_canvas" style="width:400px; height:210px"> </div>

<%= link_to 'Edit', edit_maquina_path(@maquina) %> |
<%= link_to 'Back', maquinas_path %>
